<template>
  <div class="layout">
    <h2 class="function-header">基地介绍</h2>
    <div class="intro-container content-container">
      <div class="second-tit001"><p>基地列表</p></div>
      <div class="base-list" v-if="departList && departList.length > 0">
        <div 
          class="base-card" 
          v-for="item in departList" 
          :key="item.id" 
          @click="showIntro(item)"
          :class="{ 'active': currentIntro?.id === item.id }"
        >
          <div class="base-name">{{item.name}}</div>
          <div class="base-badge" v-if="item.tag">{{item.tag}}</div>
        </div>
      </div>
      <el-empty v-else description="暂无基地数据" />
    </div>
    <div class=" content-container">
      <div class="second-tit001"><p>招生简章</p></div>
      <div class="notice-list">
        <NoticeList v-if="tableData && tableData.length > 0" :noticeData="tableData" :layout="false" />
        <PaginationView
          :isAffix = "false"
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :allChoose="isAllChooseBtn"
          :pageChoose="isPageChooseBtn"
          :options="batchOptions"
          :checkedNum="checkedNum"
          :canChoose="false"
          @changeSize="handleSizeChange"
          @currentChange="handleCurrentChange"
          @changePageChoose="handlePageChoose"
          @changeAllChoose="handleAllChoose"
          @invertChoose="handleInvertChoose"
          @checkOption="handleBatchOptions"
          @refreshList="getTableData"
          @cancelChoose="handleResetPagination"
          v-if="tableData && tableData.length > 0"
        />
      </div>
    </div>
    <el-dialog v-model="showIntroVisible" title="基地介绍" width="60%" class="notice-title">
      <el-scrollbar max-height="400px">
        <div class="notice-html" v-html="currentIntro.addition"></div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="showIntroVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div> 
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getDepartTree, getDepartById } from "@/api/depart";
import { pagingAnnouncement } from '@/api/notice';
import { tableList as mixTable } from "@ruifox-cms/utils";
import NoticeList from "../components/NoticeList.vue";

const departList = ref([]);
const getDepart = async () => {
  const res = await getDepartTree()
  if (res.code === 20000) {
    departList.value = res.data.children
  }
}

//分页器
const {
  queryData,
  tableData,
  // tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  // handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: pagingAnnouncement,
  // batchFuncApi: deleteByIdsCourse,
});

const defaultForm = reactive({
  currentPage: 1,
  pageSize: 10,
  type: "DEPARTMENT",  //部门公告
  title: "",
  top: ""
})
Object.assign(queryData, defaultForm);

// const getNotice = async () => {
//   const res = await pagingAnnouncement(queryData);
//   tableData.value = res.data.list;
//   console.log("tableData11", tableData.value);
// }

//基地介绍显示
const showIntroVisible = ref(false);
const currentIntro = ref({});
const showIntro = async (item) => {
  const res = await getDepartById({departId: item.id}); 
  if(res.code === 20000) {
    currentIntro.value = res.data;
    currentIntro.value.addition = JSON.parse(currentIntro.value.addition);
    console.log("currentIntro.value",currentIntro.value);
    
    showIntroVisible.value = true;
  } else {
    console.error("获取基地介绍失败", res.message);
  }
}
onMounted(async() => {
  await getDepart();
  // await getNotice();

  await getTableData();
  console.log("tableData",tableData.value);
});

</script>

<style scoped lang="scss">
.function-header{
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.content-container{
  margin-top: px2rem(40);
  padding: px2rem(20);
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  border-radius: px2rem(10);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
  .base-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(px2rem(180), 1fr));
    gap: px2rem(20);
    margin-top: px2rem(20);
    .base-card {
      position: relative;
      padding: px2rem(15);
      border-radius: px2rem(3);
      /* background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%); */
      box-shadow: 0 px2rem(4) px2rem(8) rgba(0, 0, 0, 0.1);
      border: 1px solid $borderColor;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      overflow: hidden;
      
      &:hover {
        /* transform: translateY(px2rem(-2)); */
        box-shadow: 0 px2rem(8) px2rem(16) rgba(0, 0, 0, 0.1);
        border-color: $mainColor;
        
        .base-name {
          color: $mainColor;
        }
      }
      
      &.active {
        border-color: $mainColor;
        background: rgba($mainColor, 0.05);
        
        .base-name {
          color: $mainColor;
          font-weight: 500;
        }
      }
      
      .base-name {
        font-size: px2rem(16);
        font-weight: 400;
        color: #333;
        transition: color 0.2s;
        text-align: center;
      }
      
      .base-badge {
        position: absolute;
        top: px2rem(-6);
        right: px2rem(-6);
        background: $mainColor;
        color: white;
        font-size: px2rem(12);
        padding: px2rem(2) px2rem(8);
        border-radius: px2rem(10);
        box-shadow: 0 px2rem(2) px2rem(4) rgba(0,0,0,0.1);
      }
    }
  }
  .notice-list{
    margin-top: px2rem(20);
  }
}
</style>